<html>
<head>
    <meta charset="utf8">
    <title>React问答 app - by 1ke.co & zexeo.com</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <style>
      .container{
        max-width: 800px;
      }
      .jumbotron .container{
        position: relative;
        max-width: 800px;
      }
      #add-question-btn{
        position: absolute;
        bottom: -20px;
        right: 20px;
      }
      form[name="addQuestion"] .btn{
        margin: 20px 0 0 15px;
      }
      .media-left{
        text-align: center;
        width:70px;
        float: left;
      }
      .media-left .btn{
        margin-bottom: 10px;
      }
      .vote-count{
        display: block;
      }
    </style>
</head>
<body>
    <div id="app">
      <div class="jumbotron text-center">
          <div class="container">
            <h1>React问答</h1>
            <button id="add-question-btn" class="btn btn-success">添加问题</button>
          </div>
      </div>
      <div class="main container">
        <form name="addQuestion" class="clearfix">
          <div class="form-group">
            <label for="qtitle">问题</label>
            <input type="text" class="form-control" id="qtitle" placeholder="您的问题的标题">
          </div>
          <textarea class="form-control" rows="3" placeholder="问题的描述"></textarea>
          <button class="btn btn-success pull-right">确认</button>
          <button class="btn btn-default pull-right">取消</button>
        </form>
        <div id="questions" class="">
          <div class="media">
            <div class="media-left">
              <button class="btn btn-default">
                <span class="glyphicon glyphicon-chevron-up"></span>
                <span class="vote-count">22</span>
              </button>
              <button class="btn btn-default">
                <span class="glyphicon glyphicon-chevron-down"></span>
              </button>
            </div>
            <div class="media-body">
              <h4 class="media-heading">产品经理与程序员矛盾的本质是什么？</h4>
              <p>理性探讨，请勿撕逼。产品经理的主要工作职责是产品设计。接受来自其他部门的需求，经过设计后交付研发。但这里有好些职责不清楚的地方。</p>
            </div>
          </div>

          <div class="media">
            <div class="media-left">
              <button class="btn btn-default">
                <span class="glyphicon glyphicon-chevron-up"></span>
                <span class="vote-count">12</span>
              </button>
              <button class="btn btn-default">
                <span class="glyphicon glyphicon-chevron-down"></span>
              </button>
            </div>
            <div class="media-body">
              <h4 class="media-heading">热爱编程是一种怎样的体验？</h4>
              <p>别人对玩游戏感兴趣，我对写代码、看技术文章感兴趣；把泡github、stackoverflow、v2ex、reddit、csdn当做是兴趣爱好；遇到重复的工作，总想着能不能通过程序实现自动化；喝酒的时候把写代码当下酒菜，边喝边想边敲；不给工资我也会来加班；做梦都在写代码。</p>
            </div>
          </div>

        </div>

      </div>
    </div>

    <!-- 
    <script src="/dist/js/main.js"></script>  -->
</body>
</html>